<template>
  <div class="app-container">
    <toBeProcessedFilter @on-filter="submitFilterForm"/>

    <el-table border :data="tableData.list" v-loading="loading" element-loading-text="加载中..." class="mgtop">
      <el-table-column label="被举报会员账号" prop="target_account" align="center">
      </el-table-column>
      <el-table-column label="被举报会员昵称" prop="target_nick" align="center">
      </el-table-column>
      <el-table-column label="被举报会员类型" prop="target_type" align="center">
         <template slot-scope="{row}">
           {{row.target_type==0?'本站会员':(row.target_type==1?'外部拉取':'-')}}
        </template>
      </el-table-column>
      <el-table-column label="被举报内容" prop="msg_body" align="center">
      </el-table-column>
      <el-table-column label="最后发送时间" prop="msg_time" align="center">
      </el-table-column>
      <el-table-column label="被举报次数" prop="report_count" align="center">
      </el-table-column>
      <el-table-column label="历史被禁言次数" prop="ban_count" align="center">
      </el-table-column>
       <el-table-column label="操作" width="180" fixed="right" align="center">
        <template slot-scope="{row}">
       <el-button type="text" v-if="roleCheck('chatRoom-processed-detail')" @click="openDialog(row,'detail')">查看详情</el-button>
          <el-button type="text" v-if="roleCheck('chatRoom-processed-ignore')" @click="ignoreClick(row)">忽略</el-button>
          <el-button type="text" v-if="roleCheck('chatRoom-processed-ban')" @click="openDialog(row,'ban')">禁言</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination background @size-change="gridSizeChange" @current-change="gridCurrentChange"
                     :current-page="filters.page" :page-sizes="gridPageSize" :page-size="filters.size"
                     :layout="gridLayout" :total="Number(tableData.total)">
      </el-pagination>
    </div>
    <detailDialog
      :dialogVisible="DetailDialogVisible"
      v-if="DetailDialogVisible"
      :row-data="dialogData"
      @cancel="DetailDialogVisible = false"
    />
    <banDialog
      :dialogVisible="banDialogVisible"
      v-if="banDialogVisible"
      :row-data="dialogData"
      @cancel="banDialogVisible = false"
    />
  </div>
</template>

<script>
import { getPendingList, postIgnoreReport } from '@/services/api/chatRoom';
import toBeProcessedFilter from './toBeProcessedFilter';
import detailDialog from './dialog/detailDialog';
import banDialog from './dialog/banDialog';
import { grid } from '@/build';
import { messageType } from '@/const/enum';

export default {
  name: 'toBeProcessedTable',
  mixins: [grid],
  props: ['value'],
  components: {
    toBeProcessedFilter,
    detailDialog,
    banDialog,
  },
  data() {
    return {
      tableData: [],
      DetailDialogVisible: false,
      banDialogVisible: false,
      dialogData: '',
      filters: {
        page: 1,
        size: 20,
        target_nick: undefined,
        target_account: undefined,
        num_min: undefined,
        num_max: undefined,
        start_time: moment().format('YYYY-MM-DD 00:00:00'),
        end_time: moment().format('YYYY-MM-DD 23:59:59'),
      },
    };
  },
  watch: {
    value(val) {
      if (val) {
        this.gridSearch();
      }
    },
  },
  methods: {
    submitFilterForm(formInline) {
      let num_max; let num_min; let start_time; let
        end_time;
      const {
        time, target_nick, target_account, number, searchType, target_type,
      } = formInline;
      if (!_.isUndefined(time) && _.isArray(time)) {
        [start_time, end_time] = time;
        formInline = { ...formInline, start_time, end_time };
      } else {
        this.filters.start_time = undefined;
        this.filters.end_time = undefined;
      }
      if (searchType === 1) {
        this.filters.num_min = number;
        this.filters.num_max = undefined;
      } else if (searchType === 2) {
        this.filters.num_max = number;
        this.filters.num_min = undefined;
      } else if (searchType === -1) {
        this.filters.num_max = undefined;
        this.filters.num_min = undefined;
      }
      this.filters = {
        ...this.filters, target_nick, target_account, start_time, end_time, target_type,
      };
      this.gridSearch();
    },
    openDialog(row, dialogType) {
      if (dialogType === 'detail') {
        this.DetailDialogVisible = true;
      } else {
        this.banDialogVisible = true;
      }
      window.scrollTo(0, 0);
      this.dialogData = row;
    },
    async ignoreClick(data) {
      const { userInfo } = this.$store.state.user;
      try {
        await this.$confirm('确定要忽略对该账号的举报信息吗？', '忽略举报', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        });
        const [status, result] = await postIgnoreReport({
          uid: userInfo.userId, account: userInfo.username, target_type: data.target_type, target_uid: data.target_uid, target_account: data.target_account, target_nick: data.target_nick, remark: '',
        });
        if (!status) throw new Error(result.message);
        this.$message({
          type: 'success',
          message: '忽略成功!',
        });
        this.getAll();
      } catch (e) {
        if (e === messageType.cancel) return;
        this.$message({
          type: 'error',
          message: `忽略失败!${e.message || ''}`,
        });
      }
    },
  },

  mounted() {
    this.bindGet(getPendingList, 'tableData', {
      action: 'getGrid',
      sendingData: 'filters',
    });
    this.getAll();
  },
};
</script>

<style lang="scss" scoped>
 .mgtop{margin-top:30px}
</style>
